<template>
  <view>
    <!-- 头部内容 -->
    <view class="head">
      <!-- 上 -->
      <view>
        <image src="https://s1.ax1x.com/2023/05/08/p9w1Se0.png" mode="" class="pad"></image>
        <text class="pad1">菜品信息</text>
        <view class="">
          <text class="pad" style="margin-top: 26rpx;display: block;">菜品名称</text>
          <!-- 			<text style="margin-left: 410rpx;display: block;margin-top: -40rpx;">{{name}}</text> -->
          <input style="width: 210rpx;display: block;margin-top: -40rpx;text-align: right;margin-left: 410rpx;"
            type="text" v-model.trim="name" placeholder="请输入菜品名">
        </view>

      </view>
      <!-- 下 -->
      <view>
        <image src="https://s1.ax1x.com/2023/05/08/p9w1Se0.png" mode="" class="pad"></image>
        <text class="pad1">就餐信息</text>
        <view class="line">

          <text style="margin-top: 38rpx;display: block;padding-left: -20rpx;">选择餐别</text>

          <text style="margin-left: 496rpx;display: block;margin-top: -38rpx;">{{typeName}}</text>
          <image src="https://s1.ax1x.com/2023/05/08/p9032Os.png" mode=""
            style="width: 40rpx;height: 40rpx;margin-left:558rpx;display: block;margin-top: -40rpx;">
          </image>
        </view>
        <view class="line">
          <picker @change="bindPickerChange2" :value="index" :range="array" range-key="name">
            <text style="margin-top: 38rpx;display: block;">就餐形式</text>
            <text style="margin-left: 496rpx;display: block;margin-top: -38rpx;">{{array[index].name}}</text>
          </picker>
          <image src="https://s1.ax1x.com/2023/05/08/p9032Os.png" mode=""
            style="width: 40rpx;height: 40rpx;margin-left:558rpx;display: block;margin-top: -40rpx;">
          </image>
        </view>
      </view>
    </view>
    <!-- 中部内容 -->
    <view class="mid">
      <view>
        <image src="https://s1.ax1x.com/2023/05/08/p9w1Se0.png" mode="" class="pad"></image>
        <text class="pad1">菜品食物</text>
      </view>
      <view>
        <text class="pad" style="margin-top: 26rpx;display: block;">食物名</text>
        <view style="margin-left: 182rpx;margin-top: -44rpx;">总计: <text style="font-weight: bold;">150g</text>
        </view>
        <view style="margin-left: 374rpx;margin-top: -40rpx;"><text style="font-weight: bold;">92.00</text>kcal
        </view>
        <view style="margin-left: 564rpx;margin-top: -40rpx;">操作</view>
      </view>
      <view v-for="item in 3" :key="item">
        <text class="pad" style="margin-top: 26rpx;display: block;">111</text>
        <view style="margin-left: 222rpx;margin-top: -44rpx;">22</view>
        <view style="margin-left: 396rpx;margin-top: -44rpx;">20.00</view>
        <view style="margin-left: 564rpx;margin-top: -44rpx;color: rgba(181, 42, 42, 1);" @click="deleteItem(item.id)">
          删除</view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="but" @click="addFoods">
      <text>添加食物</text>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        typeName: '', // 存放早中晚餐
        array: [{
          name: '在家'
        }, {
          name: '外出'
        }],
        index: 0,
        debounceTimer: null, // 防抖计时器
        foodstuff: [], // 用于存放菜品食物
        qid:null // 存放跳转携带的参数
      }
    },
    methods: {
      bindPickerChange: function(e) {
        this.index = e.detail.value;
      },
      bindPickerChange2: function(e) {
        this.index = e.detail.value;
      },
      // 添加食物
      async addFoods() {
        // 参数
        const data = {
          open_id: '123457',
          datetime: '2023-06-19',
          name: this.name,
          catering: '早餐',
          type: this.array[this.index].name
        }
        try {
          const {
            data: res
          } = await uni.$http.post('/three_meals/insert_three_meals', data)
          if (res.status == 0) {
            uni.$showMsg('添加成功')
            uni.setStorageSync("foodsName", JSON.stringify(this.name))
            setTimeout(() => {
              // 修改成功，跳转到记录页面，并携带菜品名称
              uni.switchTab({
                url: '/pages/jilu/jilu?name=123',
              });
            }, 500)
          } else {
            uni.$showMsg('添加失败，请稍后重试')
          }
        } catch (e) {
          uni.$showMsg('网络出问题了，请稍后重试')
        }
      },
      // 删除食物
    async deleteItem (id) {
      try {
        const res = await uni.$http.post('/three_meals/delete_three_meals',{id})
        uni.$showMsg('删除成功')
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    },
    watch: {
      name(newVal) {
        if (this.debounceTimer) {
          clearTimeout(this.debounceTimer)
          this.debounceTimer = null
        }
        this.debounceTimer = setTimeout(async () => {
          const data = {
            name: newVal
          }
          const {
            data: res
          } = await uni.$http.post('/three_meals/get_foodstuff', data)
          console.log(res.data);
          this.foodstuff = res.data
        }, 500)
      }
    },
    // 获取跳转携带的参数
    onLoad(options) {
      this.qid = options.qid
      if(this.qid == 1){
        this.typeName = '早餐'
      }else if(this.qid == 2){
        this.typeName = '午餐'
      }else{
         this.typeName = '晚餐'
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: rgba(245, 246, 250, 1);
    font-size: 32rpx;
    color: rgba(73, 69, 75, 1);
    font-family: '思源黑体';
  }

  .pad {
    padding-left: 24rpx;
  }

  .pad1 {
    margin-left: 100rpx;
    margin-top: -58rpx;
    display: block;
  }

  .head {
    width: 672rpx;
    height: 562rpx;
    background-color: #fff;
    margin: auto;
    border-radius: 32rpx;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    margin-top: 86rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-top: 50rpx;
    }

    .line {
      border-bottom: 4rpx solid rgba(240, 240, 240, 1);
      width: 580rpx;
      margin: auto;
      padding-bottom: 16rpx;
    }
  }

  .mid {
    width: 672rpx;
    // height: 282rpx;
    background-color: #fff;
    margin: auto;
    border-radius: 32rpx;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    margin-top: 86rpx;
    padding-bottom: 20rpx;
    // overflow: auto;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-top: 36rpx;
    }
  }

  .but {
    background-color: rgba(255, 121, 83, 1);
    width: 672rpx;
    height: 112rpx;
    margin: auto;
    border-radius: 32rpx;
    font-size: 48rpx;
    color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200rpx;
  }
</style>
